<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style>
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 8.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      /* float: left;
      margin-left: 30%; */
      color: #fff;
      font-size: 16px;
      text-align: center;
      margin-left: calc(50% - 1.5rem - 4rem);
    }
    /*修改内容区背景色*/
    body{
      background-color:#fff;
    }
    .content{
      background-color: #fff;
    }
    .menu{
      width: 100%;
      height:2.2rem;
      background-color:#fff;
      border-bottom: 1px solid #ededee;
      font-size: 14px;
      z-index: 300;
      float: top;
      position: relative;
      top:2.21rem;
    }
    .menu h3{
      margin:0;
      width: 100%;
      height: 2.2rem;
      line-height: 2.2rem;
      padding-left:1.2rem;
      color: #1FCA23;
    }
    #main{
       position:absolute;
       top:2.9rem;
    }
    #li_block{
      width: 100%;
      height: auto;
      float: left;
    }
    #li_block ul{
      margin:0;
      padding:0;
    }
    #li_block ul.list-container:before{
      display: none;
      content: '',
      height: 0;
    }
    #li_block ul.list-container:after{
      display: none;
      content: '',
      height: 0;
    }
    #li_block ul li{
      padding:0.55rem 0.5rem 0 1.2rem;
      border-bottom: 1px solid #ededee;
      position: relative;
    }
    #li_block ul li p{
      font-size: 12px;
      color: gray;
    }
    .main_title{
      width: 5.4rem;
      position: absolute;
      top:1.1rem;
      right: 0;
      font-size: 14px;
      font-weight:600;
      color:#1FCA23; 
    }
  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">我的积分</span>
      </header>

      <!-- 页面内容区域 -->
      <!-- <div class="content"> -->
         <div class="menu">
         <!--   <h3>总积分：8734</h3> -->
         </div>
         <!-- 主题内容部分 -->
         <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" id="main">
              <div class="list-block" id="li_block">
                   <ul class="list-container" >
                   </ul>
              </div>
              
              <!-- 加载提示符 -->
              <div class="infinite-scroll-preloader">
                  <div class="preloader"></div>
              </div>
         </div>

         <!-- <div class="study_main">
               <ul>
                  <li>
                     <h5 style="margin:0;">购买英语小学六年级</h5>
                     <p>获得时间：2018.09.24&nbsp;12:00:00</p>
                     <div class="main_title">获得积分：100</div>
                  </li>
                  <li>
                     <h5 style="margin:0;">购买英语小学六年级</h5>
                     <p>获得时间：2018.09.24&nbsp;12:00:00</p>
                     <div class="main_title">获得积分：100</div>
                  </li>
                  <li>
                     <h5 style="margin:0;">购买英语小学六年级</h5>
                     <p>获得时间：2018.09.24&nbsp;12:00:00</p>
                     <div class="main_title">获得积分：100</div>
                  </li>
               </ul>
         </div> -->
      <!-- </div>
       
      </div> -->

    </div>
  </div>

  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">

   // 点击返回
   function backclick(){
     native_goto('local/finish');
   }

      // 加载flag
      var loading = false;
      var offset = 0;
      var limit = 10;
      var lastlength = 10;
      var datalist = new Array();

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {
              // 重置加载flag
              loading = false;
              console.log('================'+lastlength + '====' + limit);

              if (lastlength < limit) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = datalist.length;
               getData();
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });

  // 遍历数据 页面内容    
  function getData(){
    var param = {}
    var url = 'api/v1/scores?search=user_id:'+curuserid+'&offset='+offset+'&limit='+limit;
    net_request('get',url,param,successCallBack,errorCallBack);
    // alert(url);
  }
  
  // 遍历总积分数据
   function userinfo(){
      var param = {}
      var url = 'apis/userinfo';
      net_request('get',url,param,userinfoSuccessCallBack,errorCallBack);
   }
   
  // 成功函数回调 总积分
  function userinfoSuccessCallBack(data){
      // 调用 页面
      getData();

     if (isNotNull(data) && data.success) {
        var item = data.data;
        var html = '';
        if (isNotNull(item)) {

           html = `<h3>总积分：${item.score}</h3>`;

           if (!isNotNull(item.score)) {
             html = `<h3>总积分：无</h3>`;
           }       
        }

        $$('.menu').html(html);
     }
  }


  //成功函数回调 页面
  function successCallBack(data){
    // alert(JSON.stringify(data));

    if (isNotNull(data) && data.success) {
      var databody = data.data;
      if (offset == 0) {
        datalist = new Array();
      }
      if (isNotNull(databody)) {
         var list = databody.list;
         if (isNotNull(list)) {
           var html = '';
           lastlength = list.length;
           for (var i = 0; i < list.length; i++) {
              var item = list[i];
              datalist.push(item);
           }
            for (var i = 0; i < datalist.length; i++) {
                  var item = datalist[i];
                  if (isNotNull(item)) {
                    if (isNotNull(item.order)) {
                       var oderitem = item.order.book;
                       if (isNotNull(oderitem)) {
                         var bookname = oderitem.name;
                       }
                    }
                    html += '<li><h5 style="margin:0;">购买'+ bookname +'</h5><p>获得时间：'+ item.updated_at +'</p><div class="main_title">获得积分：'+ item.score +'</div></li>';
                  }           
            }   

         }

           $('.infinite-scroll-bottom .list-container').html(html);

           if (lastlength < limit || datalist.length == 0) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
           }

      }
             
    }
  }

  // 失败函数回调
  function errorCallBack(data){

  }


  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/

}
    // 初始化
    $(function(){
      userinfo();
      $.init();
    });
  </script>
</body>
</html>